<template>
    <div class="account-binding">
        <c-wrap title="绑定户号">
            <div :style="{height:height+'px','overflow-y':'auto'}">
                <c-cell :data="data" title="绑定户号" @close="handleClose"></c-cell>
            </div>
            <div class="break"></div>
            <div style="position: absolute;bottom: 0;width:100%;background-color: white;padding-bottom: 10px">
                <p style="text-align: left;margin-bottom: 0;margin-top: 5px">
                    <icon clazz="icon-tianjiaren" style="width: 24px;height: 24px;"></icon>
                    您还可以绑定其他<span style="color: red">{{5 - this.data.length}}</span>个户号
                </p>
                <mt-button type="primary" @click="click" style="margin-top: 5px">
                    去绑定
                </mt-button>
            </div>
        </c-wrap>
    </div>
</template>
<script>
    import CWrap from '../../components/CWrap'
    import CCell from '../../components/CCell'

    export default {
        components: {CWrap, CCell},
        data() {
            return {
                data: [],
                height: app.config.setting.height.display - app.config.setting.height.top - 88 - 10
            }
        },
        methods: {
            handleClose(item) {
                this.$messagebox.confirm('确定解除该户号绑定?').then(action => {
                    app.ajax.delete(app.config.api.terminal.unBind, {
                        terminalId: item.id
                    }, (res) => {
                        this.$toast('删除成功');
                        this.loadData();
                    });
                }).catch(err => {
                    this.$toast('取消删除');
                });
            },
            loadData() {
                app.ajax.get(app.config.api.terminal.list, {}, (res) => {
                    this.data = res.data.list;
                    app.util.localStorage('terminalId', res.data.default);
                });
            },
            click() {
                if (this.data.length < 5) {
                    this.$router.push({
                        name: 'accountBinding02',
                        params: {id: this.$route.params.id ? this.$route.params.id : ''}
                    })
                } else {
                    this.$toast('户号绑定已满！')
                }
            }
        },
        mounted() {
            this.loadData();
        }
    }
</script>
